<template>
	<view class="lightLayout">
		<view class="lightLeft border_box">
			<view class="border_inner">
				<view class="global-visualization-box-head">{{ ll_title }}
				</view>
				<view class="lleft_echart">
					<uni-echarts ref="echartsll" :option="optionLValue" canvasId="echartsll"></uni-echarts>
				</view>
			</view>
		</view>
		<view class="lightRight border_box">
			<view class="border_inner">
				<view class="global-visualization-box-head">{{ lr_title }}
				</view>
				<view class="light-right-container">
					<div class="right-content">
						<div v-for="item in rightInfos" :key="item.id" class="right-info">
							<img :src="item.img" alt="图片" class="right-img" />
							<span class="right-text">{{ item.text }}</span>
							<span
								:class="item.id === '1' ? 'right-num' : item.id === '2' ? 'right-num1' : 'right-num2'">{{ item.num }}</span>
						</div>
					</div>
					<div class="right-chart">
						<div class="echartsr-container"><img class="light_chart"
								src="http://portal.xumengte.com/icons/loght_chart.gif" />
							<view class="light-item"><text>日遮阳使用率</text><text
									style="color:#73DEFF;margin-top: 1vh;font-weight: bold;">25%</text></view>
						</div>
						<div class="echartsr-container"><img class="light_chart"
								src="http://portal.xumengte.com/icons/loght_chart.gif" />
							<view class="light-item"><text>日节约遮阳电量</text><text
									style="color:#73DEFF;margin-top: 1vh;font-weight: bold;">58.45kWh</text></view>
						</div>
						<div class="echartsr-container"><img class="light_chart"
								src="http://portal.xumengte.com/icons/loght_chart.gif" />
							<view class="light-item"><text>年节约遮阳电费</text><text
									style="color:#73DEFF;margin-top: 1vh;font-weight: bold;">￥6590.18</text></view>
						</div>
					</div>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import moment from "moment";
	import store from '@/store/index.js';
	import * as echarts from 'echarts';
	import $config from '@/common/config.js';
	import request from '@/common/request.js';
	const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
	import UniEcharts from '@/components/echarts-uniapp/echarts-uniapp.vue';
	import {
		optionLightValue
	} from "@/common/light_echart_data.js";
	export default {
		components: {
			UniEcharts
		},
		data() {
			return {
				ll_title: '遮阳-能耗数据(最近24小时)',
				lr_title: '遮阳运行数据',
				angleArc: 210,
				timerInterval: '',
				optionLValue: {},
				screenFont: 12,
				rightInfos: [{
						id: '1',
						img: 'http://portal.xumengte.com/homeImg/zj.png',
						text: '设备总数',
						num: 81,
					},
					{
						id: '2',
						img: 'http://portal.xumengte.com/homeImg/zx.png',
						text: '在线',
						num: 80,
					},
					{
						id: '3',
						img: 'http://portal.xumengte.com/homeImg/lx.png',
						text: '离线',
						num: 1,
					},
				],
				powerArray: [{
						value: '0.00',
						code: "power_lift",
						name: "电梯用电",
						unit: "千瓦时"
					},
					{
						value: '0.00',
						code: "power_newwind",
						name: "新风用电",
						unit: "千瓦时"
					},
					{
						value: '0.00',
						code: 'power_hvac',
						name: '暖通用电',
						unit: '千瓦时'
					},
					{
						value: '0.00',
						code: "power_lighting",
						name: "照明用电",
						unit: "千瓦时"
					},
					{
						value: '0.00',
						code: "power_jack",
						name: "插座用电",
						unit: "千瓦时"
					},
					{
						value: '0.00',
						code: "power_other",
						name: "其他用电",
						unit: "千瓦时"
					}
				],
				xDataArray: [],
				seriesArray: []
			}
		},
		unmounted() {
			clearInterval(this.timerInterval)
		},
		mounted() {
			let that = this;
			this.screenFont = store.state.screenWidth / 1920 * 16;
			this.optionLValue = optionLightValue;
			if (store.state.hasLogin) {
				this.logMulti()
			}
		},
		methods: {
			logMulti() {
				let that = this;
				let postData = {
					timeType: 'hour', //最近一周
					startTime: moment().startOf('hour').add(-24, 'hour').format(DATE_TIME_FORMAT),
					endTime: moment().startOf('hour').format(DATE_TIME_FORMAT),
					projectId: $config.pcode,
					configId: this.powerArray.map((item) => item.code).join(','),
				};
				let headerdata = {
					"content-type": "application/json"
				};
				request.postRaw('/jeecgboot/device/data/logByConfig', headerdata, postData).then(resData => {
					console.log('resData==>>', resData);
					if (resData.code == 200) {
						let resultData = resData.result;
						if (resultData) {
							console.log(resultData, '**************res*******************')
							let xDataArray = resultData.range.map((item) => {
								return item.substring(11) + '时';
							});
							let sData1Array = resultData.mdData.map((item) => {
								return item.slice(-1)[0]?.power?.toFixed(2) || 0;
							});
							that.optionLValue = {
								...that.optionLValue,
								xAxis: [{
									...that.optionLValue.xAxis[0],
									data: xDataArray
								}],
								series: [{
									name: '遮阳用电',
									type: 'bar',
									stack: '1',
									emphasis: {
										focus: 'series',
									},
									itemStyle: {
										normal: {
											color: 'rgba(118, 219, 251)',
										},
										opacity: 0.2,
									},
									label: {},
									data: sData1Array
								}, ]
							};
						}
					}
				}).catch(errData => {
					console.log('errData==env>>', errData)
				});
			},

		},
	}
</script>
<style>
	@import 'index.css';
</style>
